<template>
	<div>
      <div class="search">
      	<input v-model="keyword"  type="text" placeholder="请输入旅游城市或拼音" class="search-input">
      </div>
      <div class="search-content" ref="search" v-show="keyword">
      	<ul>
      		<li class="searchItem border-bottom" v-for="item of list" :key="item.id">{{item.name}}</li>
      		<li v-show="hasNodata">没有找到你要数据</li>
      	</ul>
      	
      </div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
export default{
	props:{
		cities:Object
	},
	data () {
		return{
			keyword:'',
			list:[]
		}
	},
	watch:{
     keyword (){
     	if(this.timer){
     		clearTimeout(this.timer)
     	}
     	this.timer=setTimeout(()=>{
     			const list=[]
     	for(let i in this.cities){
     		this.cities[i].forEach((value)=>{
     			if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1){
     				list.push(value)
     			}
     		})
     	}
     	return this.list =list 
     	})
     
     	
     }
	},
	computed:{
		hasNodata (){
			return !this.list.length
		}
	},
	mounted () {
		this.scroll = new BScroll(this.$refs.search)
	}
}
</script>

<style lang="stylus" scoped>
.search
 height:.72rem
 background:#00bcd4
 padding:.2rem .5rem
 text-align:center
 padding-bottom:.2rem
 position:relative
.search-input
 width:100%
 line-height:.69rem
 border-radius:.1rem
 padding-left:.1rem
.search-content
 z-index:1
 width:100%
 overflow:hidden
 position:absolute
 top:1.9rem
 left:0
 bottom:0
 background:white
.searchItem
 padding:.1rem .2rem
 line-height:.50rem 
</style>